<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="{{pluResPath}}html/Akasha/abyss.css" type="text/css" />
  </head>
  <body>
    <div class="container">
      <div class="con">
        <div class="con-left-head">
          <!-- 使用率60%+ -->
          <div class="card-body">
            <div class="card-right">
              <div class="split-up"><img src="{{pluResPath}}img/separator/split100.png" /></div>
              {{ each characterList character }}
              {{ if character.value >= 60 }}
              <div class="card">
                <img class="bg{{ character.rarity }}" src="{{ profilePic}}{{ character.name }}.png" />
                <span>{{ character.value.toFixed(1) }}%</span>
              </div>
              {{ /if}}
              {{ /each }}
            </div>
          </div>
        </div>
        <!-- 头部标题 -->
        <div class="con-right-head">
          <div class="card-header">
            <!-- 水印 -->
            <div class="footer">{{ watermark }} @容容容三岁 设计</div>
            <div class="footer">数据来自 <span style="text-decoration: underline;">akashadata.com</span>  更新时间 {{ updateTime }}</div>            
          </div>
        </div>
      </div>
      <div class="con">
        <div class="con-left">
          <!-- 使用率25%+ -->
          <div class="card-body">
            <div class="card-right">
              <div class="split-up"><img src="{{pluResPath}}img/separator/split75.png"></div>
              {{ each characterList character }}
              {{ if character.value < 60 && character.value >= 25 }}
              <div class="card">
                <img class="bg{{ character.rarity }}" src="{{ profilePic}}{{ character.name }}.png" />
                <span>{{ character.value.toFixed(1) }}%</span>
              </div>
              {{ /if}}
              {{ /each }}
            </div>
          </div>
          <!-- 使用率5%+ -->
          <div class="card-body">
            <div class="card-right">
              <div class="split-up"><img src="{{pluResPath}}img/separator/split50.png"></div>
              {{ each characterList character }}
              {{ if character.value < 25 && character.value >= 6 }}
              <div class="card">
                <img class="bg{{ character.rarity }}" src="{{ profilePic}}{{ character.name }}.png" />
                <div><span>{{ character.value.toFixed(1) }}%</span></div>
              </div>
              {{ /if}}
              {{ /each }}
            </div>
          </div>
        </div>
        <!-- 头部标题 -->
        <div class="con-right">
          <div class="card-header">
            <div class="title">{{ abyssVersion }}</div>
            <div class="title">深渊<font color="red">12层</font></div>
            <div class="title">使用率</div>            
          </div>
        </div>
      </div>
      <div class="card-left">
        <!-- 使用率5%- -->
        <div class="card-body">
          <div class="card-foot">
            <div class="split-down"><img src="{{pluResPath}}img/separator/split10.png"></div>
            {{ each characterList character }}
            {{ if character.value < 6 }}
            <div class="card">
              <img class="bg{{ character.rarity }}" src="{{ profilePic}}{{ character.name }}.png" />
              <span>{{ character.value.toFixed(1) }}%</span>
            </div>
            {{ /if}}
            {{ /each }}
          </div>
        </div>
      </div>
    </div>
  </body>
</html>